<div class="container p-2 mx-auto sm:p-4" [ngClass]="['text' + defaultInv]">
	<h2 class="mb-4 text-2xl font-semibold leading-tight">Contacts</h2>
	<div class="overflow-x-auto">
		<table class="w-full p-6 text-xs text-left whitespace-nowrap">
			<colgroup>
				<col class="w-5" />
				<col />
				<col />
				<col />
				<col />
				<col />
				<col class="w-5" />
			</colgroup>
			<thead class="">
				<tr class="" [ngClass]="['bg' + neutral]">
					<th class="p-3">A-Z</th>
					<th class="p-3">Name</th>
					<th class="p-3">Job title</th>
					<th class="p-3">Phone</th>
					<th class="p-3">Email</th>
					<th class="p-3">Address</th>
					<th class="p-3"><span class="sr-only">Edit</span></th>
				</tr>
			</thead>
			<tbody
				*ngFor="let row of rows"
				class="border-b"
				[ngClass]="['bg' + contrast, 'border' + neutral]"
			>
				<tr *ngFor="let sub of row.subrows; let i = index">
					<td class="px-3 text-2xl font-medium" [ngClass]="['text' + plainInv]">
						{{ i == 0 ? row.char : '' }}
					</td>
					<td class="px-3 py-2">
						<p class="">{{ sub.name }}</p>
					</td>
					<td class="px-3 py-2">
						<span class="">{{ sub.title }}</span>
						<p class="" [ngClass]="['text' + plainInv]">{{ sub.company }}</p>
					</td>
					<td class="px-3 py-2">
						<p class="">{{ sub.phone }}</p>
					</td>
					<td class="px-3 py-2">
						<p class="">{{ sub.email }}</p>
					</td>
					<td class="px-3 py-2">
						<p class="">{{ sub.address }}</p>
						<p class="" [ngClass]="['text' + plainInv]">{{ sub.country }}</p>
					</td>
					<td class="px-3 py-2">
						<button
							type="button"
							title="Open details"
							class="p-1 rounded-full"
							[ngClass]="['text' + plain, 'hover:bg' + neutral, 'focus:bg' + neutral]"
						>
							<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
								<path
									d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"
								/>
							</svg>
						</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
